/* 重置默认样式 start */
body,
div,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
p {
  padding: 0;
  margin: 0;
  font-family: "Helvetica";
  -webkit-text-size-adjust: 100%;
}
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
}
img {
  vertical-align: top;
  border: none;
}
a,
a:hover {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
em,
strong,
i {
  font-style: normal;
  font-weight: normal;
}
input,
button,
select {
  border: none;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
}
html,
body,
#app,
#addFriends,
#home,
#chat-room {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*切换模板样式*/
.v-active-bg0 {
  background: #fff8e5 url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
}
.v-active-bg1 {
  background: #ffedf0 url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
}
.v-active-bg2 {
  background: #dff1ff url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
}
.v-frame0 {
  background: url(../images/frame0.png) no-repeat;
  background-size: 100% 100%;
}
.v-frame1 {
  background: url(../images/frame1.png) no-repeat;
  background-size: 100% 100%;
}
.v-frame2 {
  background: url(../images/frame2.png) no-repeat;
  background-size: 100% 100%;
}
.v-index0 {
  color: #c0610c;
  background: url(../images/index0.png) no-repeat right center;
  background-size: 100% 100%;
}
.v-index1 {
  color: #fff;
  background: url(../images/index1.png) no-repeat right center;
  background-size: 100% 100%;
}
.v-index2 {
  color: #1a79b0;
  background: url(../images/index2.png) no-repeat right center;
  background-size: 100% 100%;
}
/* 添加好友 */
#addFriends {
  background: url(../images/addFriends_bg.png) no-repeat;
  background-size: 100% 100%;
}
#addFriends .time {
  height: 8.832rem;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
#addFriends .time .time_data {
  font-size: 1.536rem;
  font-weight: normal;
}
#addFriends .time .Lunarday {
  font-size: 0.768rem;
}
#addFriends .friends {
  width: 100%;
  height: auto;
}
#addFriends .friends .apply {
  height: 3.62666667rem;
  padding: 0 0.64rem;
  transform: translateY(-0.42666667rem);
  -webkit-transform: translateY(-0.42666667rem);
  opacity: 0;
}
#addFriends .friends .apply a {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0.448rem 0;
  color: #fff;
  border-top: 2px solid #49494e;
}
#addFriends .friends .apply a .wechat {
  float: left;
  width: 0.91733333rem;
  height: 100%;
  margin-bottom: 0.68266667rem;
  margin-right: 0.46933333rem;
}
#addFriends .friends .apply a .wechat img {
  width: 0.91733333rem;
  height: 0.91733333rem;
  margin-top: 0.14933333rem;
}
#addFriends .friends .apply a .wechat span {
  line-height: 1.32266667rem;
  font-size: 0.68266667rem;
  color: #fff;
}
#addFriends .friends .apply a .add_info {
  width: 14.72rem;
}
#addFriends .friends .apply a .add_info img {
  float: right;
  width: 1.49333333rem;
  height: 1.49333333rem;
  margin-right: 0.14933333rem;
}
#addFriends .friends .apply a .add_info div {
  float: left;
  margin-left: 0.42666667rem;
}
#addFriends .friends .apply a .add_info div p {
  line-height: 0.768rem;
  font-size: 0.55466667rem;
}
#addFriends .friends .apply a .add_info div p span {
  display: inline-block;
  text-align: justify;
}
#addFriends .friends .apply a .add_info div p i {
  font-size: 0.46933333rem;
  color: #6d6e71;
  margin-left: 0.21333333rem;
}
#addFriends .friends .apply a .add_info div p:nth-of-type(2) {
  font-size: 0.512rem;
  color: #6d6e71;
}
#addFriends .friends .apply:nth-of-type(1) {
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
#addFriends .v-enter-to {
  transform: translateY(0) !important;
  -webkit-transform: translateY(0) !important;
  opacity: 1 !important;
  transition: 0.3s ease;
}
/*个人信息内容*/
#home {
  background-color: #f5f5f5;
}
#home .SayHello {
  height: 2.432rem;
  padding: 0.64rem 0.64rem;
}
#home .SayHello ul {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  height: 100%;
  background-color: #fff;
}
#home .SayHello ul li {
  font-size: 0.64rem;
  color: #999;
  padding: 0 0.64rem;
}
#home .SayHello .reply {
  display: block;
  width: 3.41333333rem;
  height: 1.19466667rem;
  line-height: 1.19466667rem;
  font-size: 0.59733333rem;
  color: #000;
  text-align: center;
  margin: 0.64rem auto 0;
  background-color: #f8f8f8;
  border-radius: 0.17066667rem;
  -webkit-border-radius: 0.17066667rem;
}
#home .SetUp {
  display: block;
  width: 100%;
  height: 1.49333333rem;
  line-height: 1.49333333rem;
  font-size: 0.68266667rem;
  color: #333;
  text-indent: 0.53333333rem;
  background-color: #fff;
  border-top: 2px solid #e5e4e9;
  border-bottom: 2px solid #e5e4e9;
}
#home .region {
  height: auto;
  background-color: #fff;
  margin-top: 0.64rem;
  padding: 0 0.64rem;
  border-top: 2px solid #e5e4e9;
  border-bottom: 2px solid #e5e4e9;
}
#home .region div {
  height: 1.62133333rem;
  line-height: 1.62133333rem;
  font-size: 0.68266667rem;
}
#home .region div span {
  margin-left: 1.96266667rem;
}
#home .region div:nth-of-type(1) {
  border-top: 2px solid #e5e4e9;
}
#home .region .photo {
  height: 3.41333333rem;
  line-height: 3.41333333rem;
  font-size: 0.68266667rem;
  color: #333;
  border-top: 2px solid #e5e4e9;
  border-bottom: 2px solid #e5e4e9;
}
#home .region .photo ul {
  float: right;
  width: 75%;
  height: 100%;
  margin-left: 0.42666667rem;
}
#home .region .photo ul li {
  float: left;
  height: 3.41333333rem;
  align-items: center;
  display: flex;
  display: -webkit-flex;
}
#home .region .photo ul li img {
  display: inline-block;
  width: 2.34666667rem;
  height: 2.34666667rem;
  margin-right: 0.21333333rem;
}
#home .agree {
  display: block;
  width: 13.78133333rem;
  height: 1.664rem;
  line-height: 1.664rem;
  font-size: 0.72533333rem;
  color: #fff;
  text-align: center;
  margin: 0.64rem auto 0;
  background-color: #19ad19;
  border-radius: 0.17066667rem;
  -webkit-border-radius: 0.17066667rem;
}
#vux_view_box_body .weui-panel {
  margin-top: 0.64rem;
  border-top: 2px solid #e5e4e9;
  border-bottom: 2px solid #e5e4e9;
}
#vux_view_box_body .weui-panel__bd a {
  padding: 0.64rem;
}
#vux_view_box_body .weui-panel__bd .weui-media-box__hd {
  width: 2.56rem;
  height: 2.56rem;
}
#vux_view_box_body .weui-panel__bd .weui-media-box__bd .weui-media-box__title {
  font-size: 0.68266667rem;
  margin-top: -1.28rem;
}
#vux_view_box_body .weui-panel__bd .weui-media-box__bd .weui-media-box__desc {
  font-size: 0.59733333rem;
}
/* 聊天内容 */
.ChatRoom {
  background-color: #f5f5f5;
}
.ChatRoom .swiper-container {
  height: 95%;
  overflow: hidden;
  background: url(../images/filename_bg.png) no-repeat;
  background-size: 100% 100%;
}
.ChatRoom .swiper-container .swiper-wrapper .room {
  width: 94%;
  padding: 0.448rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left,
.ChatRoom .swiper-container .swiper-wrapper .room .right {
  position: relative;
  display: block;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left img,
.ChatRoom .swiper-container .swiper-wrapper .room .right img {
  width: 1.70666667rem;
  height: 1.70666667rem;
  margin-top: 0.256rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div,
.ChatRoom .swiper-container .swiper-wrapper .room .right div {
  max-width: 10.24rem;
  padding: 0.256rem 0;
  word-wrap: break-word;
  text-align: justify;
  text-justify: distribute-all-lines;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div p,
.ChatRoom .swiper-container .swiper-wrapper .room .right div p {
  position: relative;
  line-height: 0.72533333rem;
  font-size: 0.512rem;
  padding: 0.42666667rem;
  border-radius: 0.17066667rem;
  -webkit-border-radius: 0.17066667rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div p span,
.ChatRoom .swiper-container .swiper-wrapper .room .right div p span {
  position: absolute;
  top: 0.42666667rem;
  width: 0.23466667rem;
  height: 0.49066667rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left {
  color: #333;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left img {
  float: left;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left em {
  float: left;
  color: #c8c8cd;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div {
  float: left;
  width: 12.37333333rem;
  height: auto;
  margin-left: 0.42666667rem;
  padding-right: 2.13333333rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div p {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #dddddd;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div p img {
  float: right !important;
  width: 2.56rem !important;
  height: 2.56rem !important;
  background-color: #007aff;
  margin-top: -0.10666667rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .left div p span {
  left: -0.23466667rem;
  background: url(../images/transLeft.png) no-repeat;
  background-size: 100% 100%;
}
.ChatRoom .swiper-container .swiper-wrapper .room .right img {
  float: right;
}
.ChatRoom .swiper-container .swiper-wrapper .room .right div {
  float: right;
  width: 12.37333333rem;
  height: auto;
  margin-right: 0.42666667rem;
  padding-left: 2.13333333rem;
}
.ChatRoom .swiper-container .swiper-wrapper .room .right div p {
  float: right;
  background-color: #a0e759;
  border: 2px solid #93c573;
}
.ChatRoom .swiper-container .swiper-wrapper .room .right div p span {
  right: -0.21333333rem;
  background: url(../images/transRight.png) no-repeat;
  background-size: 100% 100%;
}
.ChatRoom .text-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.664rem;
  padding: 0.32rem 0;
  background-color: #ffffff;
  z-index: 3;
}
.ChatRoom .text-input input {
  width: 11.09333333rem;
  height: 1.45066667rem;
  font-size: 0.59733333rem;
  text-indent: 0.64rem;
  margin-left: 1.28rem;
  border: 2px solid #e5e4e9;
  border-radius: 0.17066667rem;
  -webkit-border-radius: 0.17066667rem;
}
.ChatRoom .text-input span {
  display: inline-block;
  width: 2.432rem;
  height: 1.45066667rem;
  line-height: 1.45066667rem;
  font-size: 0.59733333rem;
  color: #fff;
  text-align: center;
  margin-left: 0.42666667rem;
  background-color: #1aac19;
  border-radius: 0.21333333rem;
  -webkit-border-radius: 0.21333333rem;
}
/*预约*/
.about {
  background: url(../images/about_bg.png) no-repeat;
  background-size: 100% 100%;
}
.about .about-info {
  position: absolute;
  bottom: 0.98133333rem;
  left: 50%;
  width: 12.8rem;
  height: 13.5rem;
  padding: 0.3rem 0.85333333rem;
  background-color: #fff;
  margin-left: -7.25333333rem;
}

#kuang{
  width: 3.2rem;
  height: 3.2rem;
  background: url(../images/kuang.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 5rem;
  left: 8.9rem;
}

.about .about-info div {
  height: 3.24266667rem;
}
.about .about-info div p {
  line-height: 1.6rem;
  font-size: 0.64rem;
}
.about .about-info div p span {
  display: inline-block;
  margin-left: 1.49333333rem;
  color: mediumvioletred;
}
.about .about-info div input,
.about .about-info div select {
  width: 100%;
  height: 1.6rem;
  font-size: 0.64rem;
  text-indent: 0.64rem;
  background-color: #f7f7eb;
  border: 2px solid #e6d3c8;
}
.about .about-info button {
  display: block;
  width: 8.66133333rem;
  height: 2.47466667rem;
  font-size: 0.64rem;
  color: #5e4121;
  background: url(../images/submit_bg.png) no-repeat;
  background-size: 100% 100%;
  margin: 0.826133333rem auto 0;
}
.about .position {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.about .position p {
  width: 11.09333333rem;
  height: 1.664rem;
  line-height: 1.664rem;
  font-size: 0.64rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.17066667rem;
  -webkit-border-radius: 0.17066667rem;
  margin: 0 auto;
}
/*上传图片*/
.Filename .tab-style {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.536rem;
  line-height: 1.536rem;
  background: url(../images/tab-style.png) no-repeat 0.98133333rem center;
  background-size: 4.05733333rem 0.61066667rem;
  text-align: right;
}
.Filename .tab-style span {
  display: inline-block;
  width: 2rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.4666667rem;
  color: #fff;
  text-align: center;
}
.Filename .tab-style span:nth-of-type(1),
.Filename .tab-style span:nth-of-type(2) {
  margin-right: 0.68266667rem;
}
.Filename .tab-style span:nth-of-type(1) {
  background-color: #fde39f;
}
.Filename .tab-style span:nth-of-type(2) {
  background-color: #ffa4bd;
}
.Filename .tab-style span:nth-of-type(3) {
  margin-right: 0.93866667rem;
  background-color: #a8bdf9;
}
.Filename .tab-style .v-active {
  border: 4px solid #ffffff;
}
.Filename .people {
  position: relative;
  width: 14.50666667rem;
  height: 19.712rem;
  text-align: center;
  margin: 1.536rem auto 0;
}
.Filename .people img {
  width: 13.65333333rem;
  height: 15.53066667rem;
}
.Filename .people img:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0.448rem;
  margin-top: 0;
}
.Filename .people .index {
  position: absolute;
  bottom: 4.48rem;
  right: 0.74666667rem;
  width: 5.03466667rem;
  height: 3.44rem;
  line-height: 2.24rem;
  font-size: 0.768rem;
  text-indent: 0.896rem;
}
.Filename .people .title {
  position: absolute;
  bottom: 1.06666667rem;
  left: 0.21333333rem;
  width: 8.61866667rem;
  height: 2.26133333rem;
  background: url(../images/title.png) no-repeat;
  background-size: 100% 100%;
}
.Filename .upload {
  position: absolute;
  top: 21.3rem;
  left: 0;
  width: 100%;
  height: 1.87733333rem;
  text-align: center;
}
.Filename .upload button {
  position: relative;
  top: 0.10666667rem;
  width: 7.95733333rem;
  height: 1.57866667rem;
  font-size: 0.59733333rem;
  color: #fff;
  background: url(../images/btn-bg.png) no-repeat;
  background-size: 100% 100%;
}
.Filename .upload button input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.Filename .upload p {
  line-height: 0.81066667rem;
  font-size: 0.64rem;
  color: #002e5f;
  margin-top: 0.85333333rem;
}
.Filename .file_load {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.Filename .file_load div {
  width: 6.4rem;
  height: 1.2rem;
  background: url(../images/loading.gif) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.Filename .file_load .layer_text {
  display: none;
  width: 8.96rem;
  height: auto;
  line-height: 0.59733333rem;
  font-size: 0.512rem;
  color: #c71585;
  padding: 0.64rem;
  border-radius: 0.17066667rem;
  -webkit-border-radius: 0.17066667rem;
  background-color: #fff;
  margin: 0 auto;
}
.result .res .frame {
  position: relative;
  width: 14.54933333rem;
  height: 19.712rem;
  margin: 0 auto;
}
.result .res .frame .people {
  position: relative;
  width: 14.50666667rem;
  height: 19.712rem;
  text-align: center;
  margin: 0.68266667rem auto 0;
}
.result .res .frame .people img {
  width: 13.65333333rem;
  height: 15.53066667rem;
}
.result .res .frame .people img:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0.448rem;
  margin-top: 0;
}
.result .res .frame .people .index {
  position: absolute;
  bottom: 4.48rem;
  right: 0.74666667rem;
  width: 5.03466667rem;
  height: 2.944rem;
  line-height: 2.24rem;
  font-size: 0.768rem;
  text-indent: 0.896rem;
}
.result .res .frame .index {
  position: absolute;
  bottom: 4.48rem;
  right: 0.74666667rem;
  width: 5.03466667rem;
  height: 2.944rem;
  line-height: 2.24rem;
  font-size: 0.768rem;
  text-indent: 0.896rem;
}
.result .res .frame .index i {
  float: right;
  font-size: 1.19466667rem;
  margin-right: 0.74666667rem;
}
.result .res .frame .QR {
  position: absolute;
  bottom: 0.29866667rem;
  left: 0.42666667rem;
  width: 3.92533333rem;
  height: 3.584rem;
  text-align: center;
}
.result .res .frame .QR img {
  display: inline-block;
  width: 2.77333333rem;
  height: 2.77333333rem;
}
.result .res .frame .QR p {
  line-height: 0.85333333rem;
  font-size: 0.46933333rem;
  color: #428eb8;
}
.result .save {
  opacity: 0;
}
.result .save img {
  width: 100%;
  height: 100%;
}
.result .res-btn {
  position: absolute;
  top: 20.7rem;
  left: 0;
  width: 100%;
  height: 2.688rem;
  text-align: center;
}
.result .res-btn p {
  display: inline-block;
  width: 5.504rem;
  height: 1.28rem;
  background: url(../images/pres.png) no-repeat;
  background-size: 100% 100%;
}
.result .res-btn a {
  display: inline-block;
  width: 5.84533333rem;
  height: 1.152rem;
  line-height: 1.152rem;
  font-size: 0.59733333rem;
  color: #fff;
  background: url(../images/btn-bg.png) no-repeat;
  background-size: 100% 100%;
}
#canvas {
  display: none;
}

.layui-m-layer2 .layui-m-layercont i {
  width: 1rem;
  height: 1rem
}

.layui-m-layer2 .layui-m-layercont p {
  margin-top: 0.9rem;
  font-size: 0.6rem;
}

.layui-m-layer2 .layui-m-layerchild {
  max-width: 15rem;
}




